<template>
  服务器信息
  <el-skeleton :rows="5" animated :loading="loading">
    <el-tabs  style="overflow: auto"p v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="CPU相关信息" name="first">
        <el-descriptions
          class="margin-top"
          title="內存相关信息"
          :column="3"
          :size="size"
          :style="blockMargin"
        >

          <el-descriptions-item label="核心数:">
            <el-tag size="small" type="danger">
              {{data.cpu.cpuNum}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="CPU总的使用率:">
            <el-tag size="small" type="primary">
              {{data.cpu.total}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="CPU系统使用率:">{{data.cpu.sys}}</el-descriptions-item>
          <el-descriptions-item label="CPU用户使用率:">{{data.cpu.used}}</el-descriptions-item>
          <el-descriptions-item label="CPU当前等待率:">{{data.cpu.wait}}</el-descriptions-item>
          <el-descriptions-item label="CPU当前空闲率:">{{data.cpu.free}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="JVM相关信息" name="second">
        <el-descriptions
          class="margin-top"
          title="系统相关信息"
          :column="3"
          :size="size"
          :style="blockMargin"
        >

          <el-descriptions-item label="当前JVM占用的内存总数(M):">
            <el-tag size="small" type="danger">
              {{data.jvm.total}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="JVM最大可用内存总数(M):">
            <el-tag size="small" type="primary">
              {{data.jvm.max}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="JVM空闲内存(M):">{{data.jvm.free}}</el-descriptions-item>
          <el-descriptions-item label="JDK版本:">{{data.jvm.version}}</el-descriptions-item>
          <el-descriptions-item label="JDK路径:">{{data.jvm.home}}</el-descriptions-item>
          <el-descriptions-item label="获取JDK名称:">{{data.jvm.name}}</el-descriptions-item>
          <el-descriptions-item label="JDK启动时间:">{{data.jvm.startTime}}</el-descriptions-item>
          <el-descriptions-item label="JDK运行时间:">{{data.jvm.runTime}}</el-descriptions-item>
          <el-descriptions-item label="JDK运行时间:">{{data.jvm.runTime}}</el-descriptions-item>
          <el-descriptions-item label="JDK资源使用率">{{data.jvm.usage}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="內存相关信息" name="third">
        <el-descriptions
          class="margin-top"
          title="內存相关信息"
          :column="3"
          :size="size"
          :style="blockMargin"
        >

          <el-descriptions-item label="内存总量(M):">
            <el-tag size="small" type="danger">
              {{data.mem.total}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="已用内存:">
            <el-tag size="small" type="primary">
              {{data.mem.used}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="剩余内存:">{{data.mem.free}}</el-descriptions-item>
          <el-descriptions-item label="内存资源使用率:">{{data.mem.usage}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="系统相关信息" name="fourth">
        <el-descriptions
          class="margin-top"
          title="系统相关信息"
          :column="3"
          :size="size"
          :style="blockMargin"
        >

          <el-descriptions-item label="服务器名称:">
            <el-tag size="small" type="danger">
              {{data.sys.computerName}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="服务器Ip:">
            <el-tag size="small" type="primary">
              {{data.sys.computerIp}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="项目路径:">{{data.sys.userDir}}</el-descriptions-item>
          <el-descriptions-item label="操作系统:">{{data.sys.osName}}</el-descriptions-item>
          <el-descriptions-item label="系统架构:">{{data.sys.osArch}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="系统文件相关信息" name="fifth" >
        <el-descriptions
          class="margin-top"
          :title="file.typeName"
          :column="4"
          :size="size"
          :style="blockMargin"
          v-for="file in data.sysFiles"
        >

          <el-descriptions-item label="盘符路径:">{{file.dirName}}</el-descriptions-item>
          <el-descriptions-item label="盘符类型:">{{file.sysTypeName}}</el-descriptions-item>
          <el-descriptions-item label="文件类型:">{{file.typeName}}</el-descriptions-item>
          <el-descriptions-item label="总大小:">
            <el-tag type="success" size="small">{{file.total}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="剩余大小:">
            <el-tag size="small">{{file.free}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="已经使用量:">
            <el-tag type="danger" size="small">{{file.used}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="资源的使用率:">
            <el-tag type="warning" size="small">{{file.usage}}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </el-skeleton>

</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref} from "vue";
import type { TabsPaneContext,ComponentSize } from 'element-plus'
const size = ref<ComponentSize>('default')
import axios from "axios";
import request from "@/api/request";
import {sysInfo} from "@/api/sys";
import {BASE_URL_PEPAY} from "@/api/config";
const activeName = ref('first')
const loading = ref(true)
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}
const data = reactive({
  cpu:{
    cpuNum: 8,
      total: 812200.0,
      sys: 2.3,
      used: 2.86,
      wait: 0.0,
      free: 94.46
  },
  jvm:{
    total: 68.0,
    max: 4076.0,
    free: 28.46,
    version: "17.0.13",
    home: "D:\\java\\jdk17",
    name: "Java HotSpot(TM) 64-Bit Server VM",
    startTime: "2024-12-01 11:33:24",
    used: 39.54,
    runTime: "0天4小时52分钟",
    usage: 58.14
  },
  mem:{
    total: 15.92,
    used: 12.58,
    free: 3.34,
    usage: 79.03
  },
  sys:{
    computerName: "四楼办公室",
    computerIp: "192.168.1.16",
    userDir: "D:\\java\\service",
    osName: "Windows 10",
    osArch: "amd64"
  },
  sysFiles:[
    {
      dirName: "D:\\",
      sysTypeName: "NTFS",
      typeName: "本地固定磁盘 (D:)",
      total: "161.0 GB",
      free: "108.8 GB",
      used: "52.2 GB",
      usage: 32.41
    }
  ]
})
onMounted(() =>{
  getSystemServeData();
})
function getSystemServeData() {
  axios.get(`${BASE_URL_PEPAY}` + "/cs/server").then(res =>{

    data.cpu = res.data.data.cpu;
    data.sys = res.data.data.sys;
    data.jvm = res.data.data.jvm;
    data.mem = res.data.data.mem;
    data.sysFiles = res.data.data.sysFiles;
    loading.value = !loading.value;
  })
  // sysInfo().then(res =>{
  //   // console.log(res.data.cpu)
  //   data.cpu = res.data.cpu;
  //   data.sys = res.data.sys;
  //   data.jvm = res.data.jvm;
  //   data.mem = res.data.mem;
  //   data.sysFiles = res.data.sysFiles;
  //   loading.value = !loading.value;
  // })
}

const marginMap: { [key in 'large' | 'default' | 'small']: string } = {
    large: '8px',
    default: '6px',
    small: '4px',
  };

  // 确保 size.value 是一个有效的键，如果不是，则默认为 'default'
const validSize = size.value && ['large', 'default', 'small'].includes(size.value as 'large' | 'default' | 'small')
    ? size.value
    : 'default';

const iconStyle = computed(() => {

  return {
    marginRight: marginMap[validSize as 'large' | 'default' | 'small'],
  };
});
const blockMargin = computed(() => {

  return {
    marginTop: marginMap[validSize as 'large' | 'default' | 'small'],
  }
})
</script>

<style scoped>

</style>
